<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Spinner from "./Spinner.svelte";
    import Space from "../Space/Space.svelte";
    import Button from "../Button/Button.svelte";

    const { Story } = defineMeta({
        title: "Components/Form/Spinner",
        component: Spinner,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Spinner />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Spinner {...args} />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        <Space dir="v">
            <Spinner size="large" />
            <Spinner />
            <Spinner size="small" />
        </Space>
    {/snippet}
</Story>

<Story name="MinMax">
    {#snippet template(args)}
        <Spinner min={10} max={20} />
    {/snippet}
</Story>

<Story name="Step" args={{ step: 0.1 }}>
    {#snippet template(args)}
        <Spinner {...args} />
    {/snippet}
</Story>

<Story name="Loop" args={{ loop: true }}>
    {#snippet template(args)}
        <Spinner min={0} max={5} {...args} />
    {/snippet}
</Story>
